﻿<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>泉州医疗大数据平台</title>
    <head>
        <th:block th:include="include :: kanban-css" />
    </head>
    <script th:inline="javascript"> var ctx = [[@{/}]]; </script>
    <style>
        body, html{
            height: 100%;
        }
        .t_title{
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 2.5em;
            line-height: 80px;
            color: #fff;
        }
        #chart_map{
            cursor: pointer;
        }
        .t_show{
            position: absolute;
            top: 0;
            right: 0;
            border-radius: 2px;
            background: #2C58A6;
            padding: 2px 5px;
            color: #fff;
            cursor: pointer;
        }
        body,html{
            background-size: cover;
        }
        .cust-type-default{float:left;cursor:pointer;width:62px;height:32px;line-height:27px;color:#14B4FE;border:2px solid #14B4FE;text-align:center;}
        .cust-type-default.left{border-radius:6px 0px 0px 6px;}
        .cust-type-default.right{border-radius:0px 6px 6px 0px;}
        .cust-type-default.active{background: #14B4FE;color:#fff;}
    </style>
</head>
<body>
<div class="header" style="height: 7%">
    <div class="bg_header" style="height: 100%">
        <table style="width:100%;height:100%;">
            <tbody><tr>
                <td style="width:20%;text-align:left;">
                    <a th:href="@{/haode/v1/quanzhouindex?tabId=1}"><div class="cust-type-default left " type="1" style="width: 20%" th:classappend="${pd.tabId == 1 or pd.tabId == '1'} ? ' active' : ' ' ">实时监控</div></a>
                    <a th:href="@{/haode/v1/quanzhouindex?tabId=2}"><div class="cust-type-default " type="2" style="width: 20%" th:classappend="${pd.tabId == 2 or pd.tabId == '2'} ? ' active' : ' ' ">当月</div></a>
                    <a th:href="@{/haode/v1/quanzhouindex?tabId=3}"><div class="cust-type-default " type="3" style="width: 20%" th:classappend="${pd.tabId == 3 or pd.tabId == '3'} ? ' active' : ' ' ">当季</div></a>
                    <a th:href="@{/haode/v1/quanzhouindex?tabId=4}"><div class="cust-type-default" type="4" style="width: 20%" th:classappend="${pd.tabId == 4 or pd.tabId == '4'} ? ' active' : ' ' ">当年</div></a>
                    <a th:href="@{/haode/v1/quanzhouindex?tabId=5}"><div class="cust-type-default right" type="4" style="width: 20%" th:classappend="${pd.tabId == 5 or pd.tabId == '5'} ? ' active' : ' ' ">总计</div></a>
                </td>
                <td style="width:60%;text-align:left;">
                    <div class="header_nav fl t_title" style="height: 100%;line-height: 100%;margin-top:2%;">
                        泉州市医疗大数据中心
                    </div>
                </td>
                <td style="width:20%;text-align:right;padding-left:10px;color:#fff;font-size:14px;font-weight:bold;" id="td-data-date"></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<!--main-->
<div class="data_content" style="padding-top:0px;padding-bottom:0px;height:93%;">
    <!-- <div class="data_time">
        温馨提示: 点击模块后跳转至详情页面。        
    </div> -->

    <div class="data_main" style="height: 70%">
        <div class="main_left fl" style=" margin-top: 10px; height: 100%;">
            <div class="left_1 t_btn6" style="cursor: pointer;">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i> 
                    <i class="l_t_line"></i> 
                </div> 
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i> 
                    <i class="r_t_line"></i> 
                </div> 
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i> 
                    <i class="b_l_line"></i> 
                </div> 
                    <!--右下边框-->
                    <div class="t_line_box">
                    <i class="r_b_line"></i> 
                    <i class="b_r_line"></i> 
                </div> 
                <div class="main_title">
                    <img th:src=" @{/kanban/images/t_1.png}" alt="">
                    区域检查项目汇总情况
                </div>
                <div id="chart_1" class="chart" style="width:100%;height: 100%;"></div>
            </div>
            <div class="left_2" style="cursor: pointer;">
                <div class="t_line_box">
                    <i class="t_l_line"></i> 
                    <i class="l_t_line"></i> 
                </div> 
                <div class="t_line_box">
                    <i class="t_r_line"></i> 
                    <i class="r_t_line"></i> 
                </div> 
                <div class="t_line_box">
                    <i class="l_b_line"></i> 
                    <i class="b_l_line"></i> 
                </div> 
                    <div class="t_line_box">
                    <i class="r_b_line"></i> 
                    <i class="b_r_line"></i> 
                </div> 
                <div class="main_title">
                    <img th:src=" @{/kanban/images/t_2.png}" alt="">
                    检查量
                </div>
                <div id="chart_2" class="chart t_btn9" style="width:100%;height: 100%;"></div>
            </div>
        </div>
        <div class="main_center fl">
            <div class="center_text" style="position: relative;">
                <div id="chart_map" style="width:100%;height:100%;">
                </div>
                <!--<div class="linshi_zdy">-->
                    <!--<ul>-->
                        <!--<li><span></span>2015批(8个)</li>-->
                        <!--<li><span></span>2016批(15个)</li>-->
                        <!--<li><span></span>2017批(13个)</li>-->
                        <!--<li><span></span>2018批(11个)</li>-->
                    <!--</ul>-->
                <!--</div>-->
            </div>
        </div>


        <div id="el-dialog" style="display: none">
            <div class="xc_layer"></div>
            <div class="popBox" id="printView">
                <div class="ttBox"><span class="tt" id="reportTitle">第一医院</span><img th:src=" @{/kanban/images/close.png}" style="width: 30px;float: right;cursor: pointer;" title="关闭弹窗" class="close"/></div>
                <div class="txtBox" id="el-dialog_body">
                    <div style="height:100%;width: 98%;margin-left: 1%;">
                        <div class="left div_any01" style="width: 64%;">
                            <div class="div_any_child">
                                <div class="div_any_title"><div type="text" class="demo-input" id="date1" style="display: inline-block;cursor: pointer;margin-right: 16px;"></div><img th:src=" @{/kanban/images/title_4.png}">门诊住院人次</div>
                                <p id="lineChart3" class="p_chart"></p>
                            </div>
                            <div class="div_any_child">
                                <div class="div_any_title"><div type="text" class="demo-input" id="date2" style="display: inline-block;cursor: pointer;margin-right: 16px;"></div><img th:src=" @{/kanban/images/title_7.png}">医疗费用</div>
                                <p id="lineChart4" class="p_chart"></p>
                            </div>
                        </div>
                        <div class="left div_any01"  style="width: 32%;">
                            <div class="div_any_child">
                                <div class="div_any_title"><div type="text" class="demo-input" id="date3" style="display: inline-block;cursor: pointer;margin-right: 16px;"></div><img th:src=" @{/kanban/images/title_18.png}">病人年龄段分布</div>
                                <p id="pieChart2" class="p_chart"></p>
                            </div>
                            <div class="div_any_child">
                                <div class="div_any_title"><div type="text" class="demo-input" id="date4" style="display: inline-block;cursor: pointer;margin-right: 16px;"></div><img th:src=" @{/kanban/images/title_20.png}">医疗费用组成</div>
                                <p id="pieChart3" class="p_chart"></p>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>


<style type="text/css">
.linshi_zdy{
    position: absolute;
    right: 0px;
    top: 450px;
}
.linshi_zdy li{
    width: 150px;
    font-size: 16px;
    padding: 3px 8px;
    cursor: pointer;
}
.linshi_zdy span{
    display: block;
    width: 14px;
    height: 14px;
    float: left;
    border-radius: 50%;
    margin-top: 3px;
    margin-right: 5px;
}
.linshi_zdy li:first-child{
    color: #ff0000;
}
.linshi_zdy li:first-child span{
    background: #ff0000;
}
.linshi_zdy li:nth-child(2){
    color: #9cff00;
}
.linshi_zdy li:nth-child(2) span{
    background: #9cff00;
}
.linshi_zdy li:nth-child(3){
    color: #fff;
}
.linshi_zdy li:nth-child(3) span{
    background: #fff;
}
.linshi_zdy li:nth-child(4){
    color: #f4a100;
}
.linshi_zdy li:nth-child(4) span{
    background: #f4a100;
}
</style>
        <div class="main_right fr" style="height: 95%">
            <div class="right_1" style="height:100%;">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i> 
                    <i class="l_t_line"></i> 
                </div> 
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i> 
                    <i class="r_t_line"></i> 
                </div> 
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i> 
                    <i class="b_l_line"></i> 
                </div> 
                    <!--右下边框-->
                    <div class="t_line_box">
                    <i class="r_b_line"></i> 
                    <i class="b_r_line"></i> 
                </div> 
                <div class="main_title" style="width:220px;">
                    <img th:src=" @{/kanban/images/t_4.png}" alt="">
                    社区医院诊断排名
                </div>
                <div id="chart_3" class="echart t_btn7" style="width:100%;height: 100%"></div>
            </div>
        </div>
    </div>
    <div class="data_bottom" style="height: 30%;">
        <div class="bottom_1 fl t_btn5" style="cursor: pointer;width:100%;height:90%">
            <div class="t_line_box">
                <i class="t_l_line"></i> 
                <i class="l_t_line"></i> 
            </div> 
            <div class="t_line_box">
                <i class="t_r_line"></i> 
                <i class="r_t_line"></i> 
            </div> 
            <div class="t_line_box">
                <i class="l_b_line"></i> 
                <i class="b_l_line"></i> 
            </div> 
                <div class="t_line_box">
                <i class="r_b_line"></i> 
                <i class="b_r_line"></i> 
            </div>
            <div id="chart_4" class="echart"

            style="width: 100%; height: 100%; -webkit-tap-highlight-color: transparent; user-select: none; position: relative;"


            ></div>



        </div>

        <!--<div class="bottom_4 fr" style="height:90%">-->
            <!--<div class="t_line_box">-->
                <!--<i class="t_l_line"></i> -->
                <!--<i class="l_t_line"></i> -->
            <!--</div> -->
            <!--<div class="t_line_box">-->
                <!--<i class="t_r_line"></i> -->
                <!--<i class="r_t_line"></i> -->
            <!--</div> -->
            <!--<div class="t_line_box">-->
                <!--<i class="l_b_line"></i> -->
                <!--<i class="b_l_line"></i> -->
            <!--</div> -->
                <!--<div class="t_line_box">-->
                <!--<i class="r_b_line"></i> -->
                <!--<i class="b_r_line"></i> -->
            <!--</div>-->
            <!--<div class="main_table t_btn3 table_zdy" style="margin-top:10px">-->
                <!--<table>-->
                    <!--<thead>-->
                    <!--<tr>-->
                        <!--<th width="34%">动态心电诊断数量</th>-->
                        <!--<th width="33%">动态血压诊断数量</th>-->
                        <!--<th width="33%">静态心电诊断数量</th>-->
                    <!--</tr>-->
                    <!--</thead>-->
                    <!--<tbody>-->
                    <!--<tr>-->
                        <!--<td>月诊断量<br>0</a></td>-->
                        <!--<td>月诊断量<br>220</td>-->
                        <!--<td>月诊断量<br>220</td>-->
                    <!--</tr>-->
                    <!--<tr>-->
                        <!--<td>日诊断量<br>0</a></td>-->
                        <!--<td>日诊断量<br>330</td>-->
                        <!--<td>日诊断量<br>330</td>-->
                    <!--</tr>-->
                    <!--<tr>-->
                        <!--<td>总计<br>0</a></td>-->
                        <!--<td>总计<br>550</td>-->
                        <!--<td>总计<br>550</td>-->
                    <!--</tr>-->
                    <!--<tr>-->
                        <!--<td>统计项4<br>220</td>-->
                        <!--<td>统计项4<br>2</td>-->
                        <!--<td>统计项4<br>2</td>-->
                    <!--</tr>-->
                    <!--</tbody>-->
                <!--</table>-->
            <!--</div>-->
        <!--</div>-->
    </div>
</div>
</body>
<head>
    <th:block th:include="include :: kanban-js" />
</head>
<script th:src="@{/kanban/js/quanzhouindex.js?9=9}"></script>
<script th:src="@{/kanban/js/quanzhou.js}"></script>
<script th:inline="javascript">
    var tabId = [[${pd.tabId}]];
    $(function () {
        loadMap();
        echart_1Load();
        echart_2Load();
        echart_3Load();
        echart_4Load();
        setInterval(function () {
            loadMap();
            echart_1Load();
            echart_2Load();
            echart_3Load();
            echart_4Load();
        }, 32000);
        window.setInterval("displayTime()",1000)//单位是毫秒
    });

    function check(val) {
        if (val < 10) {
            return ("0" + val);
        }
        else {
            return (val);
        }
    }
    function displayTime() {
        //获取div元素
        var timeDiv=document.getElementById("td-data-date");
        //获取系统当前的年、月、日、小时、分钟、毫秒
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hour = date.getHours();
        var minutes = date.getMinutes();
        var second = date.getSeconds();
        var timestr = year + "年" + month + "月" + day + "日  " + check(hour)
            + ":" + check(minutes) + ":" + check(second);
        //将系统时间设置到div元素中
        timeDiv.innerHTML = timestr;
    }
    function loadMap(){
        $.ajax({
            method: "POST",
            url: ctx + "haode/v1/quanzhou/getMap",
            contentType: 'application/json',
            dataType: 'json',
            cache: false,
            async: false,//异步,避免请求卡顿现象
            data: JSON.stringify({
                type: 1,
                tabId:tabId
            }),
            success: function(result) {
                if (result.code == web_status.SUCCESS) {
                        echart_map( result.geoCoordMap, result.data);
                } else {
//                    $.modal.alertError(result.msg);
                }
            },
            error: function(error) {
                $.modal.alertWarning("获取数据失败。");
            }
        });
    }

    function echart_1Load(){
        $.ajax({
            method: "POST",
            url: ctx + "haode/v1/quanzhou/getMap",
            contentType: 'application/json',
            dataType: 'json',
            cache: false,
            async: false,//异步,避免请求卡顿现象
            data: JSON.stringify({
                type: 2
            }),
            success: function(result) {
                if (result.code == web_status.SUCCESS) {
                    echart_1(result.e1Alist,result.e1Blist,result.e1Tcname);
                } else {
//                    $.modal.alertError(result.msg);
                }
            },
            error: function(error) {
                $.modal.alertWarning("获取数据失败。");
            }
        });
    }

    function echart_2Load(){
        $.ajax({
            method: "POST",
            url: ctx + "haode/v1/quanzhou/getMap",
            contentType: 'application/json',
            dataType: 'json',
            cache: false,
            async: false,//异步,避免请求卡顿现象
            data: JSON.stringify({
                type: 3
            }),
            success: function(result) {
                if (result.code == web_status.SUCCESS) {
                    echart_2(result.yearTitle,result.yearDtxdNum,result.yearDtxyNum,result.yearJtxdNum);
                } else {
//                    $.modal.alertError(result.msg);
                }
            },
            error: function(error) {
                $.modal.alertWarning("获取数据失败。");
            }
        });
    }

    function echart_3Load(){
        $.ajax({
            method: "POST",
            url: ctx + "haode/v1/quanzhou/getMap",
            contentType: 'application/json',
            dataType: 'json',
            cache: false,
            async: false,//异步,避免请求卡顿现象
            data: JSON.stringify({
                type: 5
            }),
            success: function(result) {
                if (result.code == web_status.SUCCESS) {
                    echart_3(result.strNameList,result.strNameValList);
                } else {
//                    $.modal.alertError(result.msg);
                }
            },
            error: function(error) {
                $.modal.alertWarning("获取数据失败。");
            }
        });
    }

    function echart_4Load(){
        $.ajax({
            method: "POST",
            url: ctx + "haode/v1/quanzhou/getMap",
            contentType: 'application/json',
            dataType: 'json',
            cache: false,
            async: false,//异步,避免请求卡顿现象
            data: JSON.stringify({
                type: 4,
                tabId:tabId
            }),
            success: function(result) {
                if (result.code == web_status.SUCCESS) {
                    echart_4(result.yearZx,result.yearTitle);
                } else {
//                    $.modal.alertError(result.msg);
                }
            },
            error: function(error) {
                $.modal.alertWarning("获取数据失败。");
            }
        });
    }

</script>
</html>